<template>
	<view class="pageContent">
		<view class="houseMain" v-for="(item,index) in headList" :key="index" @click="selectHead(index)"
			:class="item.roomId==room.roomId ? 'select' : ''">
			<view class="houseTil">
				<view class="houseTilNa">{{item.projectName || '项目名称'}}</view>
				<!-- <view>入住日期</view> -->
			</view>
			<view class="houseNo">
				<view>{{item.roomInfo+'-'+item.roomName}}</view>
				<view class="houseMes">
					<!-- <view class="houseMesIt">{{item.name}}</view> -->
					<view class="houseMesIt" v-if="item.aaa">{{item.aaa}}</view>
				</view>
			</view>
			<view class="handler">
				<view class="handlerCha handlerRed" @click.stop="goDoorList(index)">门禁权限</view>
				<view class="handlerCha handlerBlu"
					v-if="item.roomId==room.roomId && (userMsg.roleId==16 || userMsg.roleId==17)"
					@click.stop="addMem(index)">
					添加成员</view>
			</view>
			<image class="houseListIm" v-if="item.roomId==room.roomId" :src="localImages +'/selectHouse.png'" />
		</view>
	</view>
</template>


<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				headList: [],
				room: '',
				userMsg: '',
			}
		},

		onLoad() {
			this.ownerRoomList();
		},

		onShow() {
			this.updateMsg();
		},

		methods: {
			//更新房屋和用户信息
			updateMsg() {
				var room = wx.getStorageSync('room');
				this.room = room;
				var userMsg = wx.getStorageSync('userMsg');
				this.userMsg = userMsg;
			},

			async goDoorList(index) {
				var item = this.headList[index];
				var json = JSON.stringify(item);
				// console.warn(item, json)
				if (item.roomId != this.room.roomId) {
					//登录选择房屋的用户信息，再跳转添加成员页面
					await getApp().noticeList(item, false)
				}
				wx.navigateTo({
					url: '/pages/index/doorList'
				})
			},

			async ownerRoomList() {
				var url = '/UserServer/room/ownerRoomList'
				var phoneNumber = wx.getStorageSync('phone');
				//获取业主该手机号绑定的房屋列表
				var params = {
					telephone: phoneNumber
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				this.headList = param;
			},

			async selectHead(index) {
				var item = this.headList[index]
				await getApp().noticeList(item, false);
				this.updateMsg();
			},

			//添加成员
			async addMem(index) {
				wx.showLoading({
					title: '',
					mask: true,
					duration: 800
				})
				var item = this.headList[index]
				if (item.roomId != this.room.roomId) {
					//登录选择房屋的用户信息，再跳转添加成员页面
					await getApp().noticeList(item, false)
				}
				wx.navigateTo({
					url: '/pagesA/index/addMem'
				})
			},

		},

	}
</script>

<style scoped>
	.pageContent {
		height: 100vh;
		background: #F3F6F9;
		padding: 20rpx 0rpx 0rpx 0rpx;
	}

	.houseMain {
		position: relative;
		background: #FFFFFF;
		padding: 0rpx 14rpx 0rpx 14rpx;
		margin: 0rpx 0rpx 20rpx 0rpx;
	}

	.houseMain.select {
		box-shadow: 2rpx 6rpx 8rpx 0px rgba(201, 206, 216, 0.5);
	}

	.houseTil {
		display: flex;
		justify-content: space-between;
		padding: 14rpx 14rpx 14rpx 14rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #030303;
		border-bottom: 0.3px solid #E7E7E7;
	}

	.houseTilNa {
		font-size: 32rpx;
		font-weight: bold;
	}

	.houseNo {
		padding: 14rpx 14rpx 14rpx 14rpx;
		font-size: 32rpx;
		color: #030303;
		border-bottom: 0.3px solid #E7E7E7;
	}

	.houseListIm {
		position: absolute;
		width: 109rpx;
		height: 91rpx;
		top: 5rpx;
		right: 156rpx;
	}

	.houseMes {
		display: flex;
		padding: 14rpx 0rpx 14rpx 0rpx;
	}

	.houseMesIt {
		height: 40rpx;
		line-height: 40rpx;
		background: #F2F8FF;
		border-radius: 6rpx;
		border: 1px solid #BCDEFF;
		color: #519AEE;
		font-size: 28rpx;
		margin-right: 10rpx;
		padding: 0rpx 14rpx 0rpx 14rpx;
	}

	.handler {
		display: flex;
		justify-content: flex-end;
		padding: 14rpx 14rpx 20rpx 14rpx;
		width: 100%;
	}

	.handlerCha {
		height: 60rpx;
		width: 160rpx;
		line-height: 60rpx;
		background: #DDDDDD;
		border-radius: 30rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
	}

	.handlerBlu {
		background: #1086FF;
		margin-left: 18rpx;
	}

	.handlerRed {
		background: #FF635D;
		margin-left: 18rpx;
	}
</style>
